<template>
	<view>
		<uni-popup ref='popup' type="bottom" :maskClick="false">
			<view class="send-box">
				<view class="title"></view>
				<view class="text-1">填写物流信息</view>
				<view class="image" @click="close">
					<image src="/SupplyEnd/static/qx.png" mode=""></image>
				</view>
				<view class="content">
					<view class="text-2">快递寄出后，请填写快递信息</view>
					<view class="company">
						<view class="text-3">发货地址<text>*</text></view>
						<picker class="input" @change="bindPickerChange1" :value="index1" :range="array1">
							<label>{{array1[index1]}}</label>
						</picker>
					</view>
					<view class="company">
						<view class="text-3">物流公司<text>*</text></view>
						<picker class="input" @change="bindPickerChange2" :value="index2" :range="array2">
							<label>{{array2[index2]}}</label>
						</picker>
					</view>
					<view class="text-4">物流单号<text>*</text></view>
					<view class="input">
						<input type="text" v-model="code" placeholder="请输入正确的物流单号">
						<image src="/SupplyEnd/static/scan.png" mode="" @click="scanCode"></image>
					</view>
					<view class="btn" @click="confirm">
						确定
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		name: "SendPop",
		components: {
			uniPopup
		},
		props: {
			info: {
				type: Object,
				require: true
			}
		},
		data() {
			return {
				code: "",
				daddress_list: [], //发货地址列表
				express_list: [], //快递列表
				array1: [],
				array2: [],
				address_id: '', //发货地址ID				
				express_id: "", //快递ID
				index1: 0,
				index2: 0
			};
		},
		mounted() {
			this.getList()
		},
		methods: {
			open() {
				this.$refs.popup.open()
			},
			close(){
				this.$emit('fnChange')
				this.$refs.popup.close()
			},
			getList() {
				let that = this
				this.$util.request({
					url: '/mobile/index.php?act=supplier-order&op=get_send_info',
					method: 'get',
					data: {
						order_id: that.info.order_id
					},
				}).then(function(res) {
					if(res.datas.daddress_list){
						that.open()
						//发货地址列表处理
						that.daddress_list = res.datas.daddress_list
						if (that.daddress_list.length != '') {
							that.array1 = []
							that.daddress_list.map(item => {
								that.array1.push(item.seller_name+' '+item.area_info + '-' + item.address+' '+item.telphone)
							})
							that.address_id = that.daddress_list[0].address_id
						}
						//快递列表处理
						that.express_list = res.datas.express
						if (that.express_list.length != 0) {
							that.express_list.map(item => {
								that.array2.push(item.e_name)
							})
							that.express_id = that.express_list[0].express_id
						}
					}else{
						that.close()
						uni.showToast({
							title:res.message,
							icon:"none",
							duration:2000
						})
					}
				})
			},
			//发货地址选择
			bindPickerChange1: function(e) { //改变的事件名
				console.log('picker发送选择改变，携带值为', e.target.value) //用于输出改变索引值
				this.index1 = e.target.value //将数组改变索引赋给定义的index变量
				this.address_id = this.daddress_list[e.target.value].address_id
				console.log('发货地址ID', this.daddress_list)
			},
			//快递公司选择
			bindPickerChange2: function(e) { //改变的事件名
				console.log('picker发送选择改变，携带值为', e.target.value) //用于输出改变索引值
				this.index2 = e.target.value //将数组改变索引赋给定义的index变量
				this.express_id = this.express_list[e.target.value].id
				console.log('快递ID', this.express_id)
			},
			confirm() {
				let url = '';
				let that = this
				if (that.address_id == '') {
					uni.showToast({
						title: '请选择发货地址',
						icon: "none"
					})
					return
				}
				if (that.express_id == '') {
					uni.showToast({
						title: '请选择物流公司',
						icon: "none"
					})
					return
				}
				if (that.express_id == '') {
					uni.showToast({
						title: '请选择物流公司',
						icon: "none"
					})
					return
				}
				if (that.code == '') {
					uni.showToast({
						title: '物流单号不能为空',
						icon: "none"
					})
					return
				}
				url = "/mobile/index.php?act=supplier-order&op=send";
				that.$util.request({
					url: url,
					method: 'post',
					data: {
						order_id: that.info.order_id,
						eb_type: 1,
						express_id: that.express_id,
						express_code: that.code,
						daddress_id: that.address_id
					}
				}).then(res => {
					if (res.error_code == 0) {
						uni.showToast({
							title: '发货成功',
							icon: "none"
						})
						setTimeout(() => {
							that.close()
						}, 1000)
					} else {
						uni.showToast({
							title: '发货失败',
							icon: "none"
						})
					}	
				})
		},
		scanCode() {
			// 允许从相机和相册扫码
			uni.scanCode({
				success: res => {
					var result = res.result
					if (result) {
						this.code = res.result
					} else {
						uni.showToast({
							title: '没有扫描到什么！',
							icon: 'none',
							duration: 2000,
						})
					}
				}
			})
		}
	}
	}
</script>

<style lang="scss">
	.send-box {
		width: 750rpx !important;
		height:800rpx !important;
		background: #FFFFFF !important;
		border-radius: 20rpx 20rpx 0rpx 0rpx !important;
		padding: 0rpx !important;
		align-items: flex-start !important;
		z-index: 10;
	}

	.title {
		width: 750rpx;
		height: 80rpx;
		background: #E96A1D;
		opacity: 0.1;
	}

	.text-1 {
		height: 80rpx;
		width: 100%;
		position: absolute;
		top: 0;
		font-size: 32rpx;
		font-family: Microsoft YaHei;
		font-weight: 800;
		color: #333333;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.image{
		height: 80rpx;
		position: absolute;
		top: 0;
		right: 30rpx;
	    display: flex;
		align-items: center;
		image{
			width: 48rpx;
			height: 48rpx;
		}
	}
	.content {
		padding: 30rpx;

		.text-2,
		.text-3,
		.text-4 {
			font-size: 24rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #333333;

			text {
				color: #E96A1D;
			}
		}

		.text-2 {
			margin-bottom: 30rpx;
		}

		.text-3 {
			margin: 10rpx 0rpx;
		}

		.text-4 {
			margin-top: 30rpx;
		}

		.input {
			width: 660rpx;
			height: 84rpx;
			background: #F6F6F6;
			border-radius: 12rpx;
			display: flex;
			align-items: center;
			padding: 0 20rpx;
			color: #333333;

			input {
				font-size: 26rpx;
				width: 92%;
			}

			image {
				width: 64rpx;
				height: 64rpx;
			}
		}

		.btn {
			width: 360rpx;
			height: 80rpx;
			background: #E96A1D;
			border-radius: 40rpx;
			text-align: center;
			margin: 0 auto;
			margin-top: 60rpx;
			justify-content: center;
			display: flex;
			align-items: center;
			font-size: 30rpx;
			font-family: Microsoft YaHei;
			font-weight: 300;
			color: #FFFFFF;
		}
	}
</style>